<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装修家电统计表格</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eaeaea;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .description {
            color: #7f8c8d;
            margin-bottom: 20px;
        }
        
        .table-container {
            overflow-x: auto;
            margin-bottom: 30px;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #2c3e50;
        }
        
        tr:hover {
            background-color: #f5f7fa;
        }
        
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
        }
        
        .actions {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #2980b9;
        }
        
        .btn-add {
            background-color: #2ecc71;
        }
        
        .btn-add:hover {
            background-color: #27ae60;
        }
        
        .btn-export {
            background-color: #e74c3c;
        }
        
        .btn-export:hover {
            background-color: #c0392b;
        }
        
        .btn-clear {
            background-color: #f39c12;
        }
        
        .btn-clear:hover {
            background-color: #e67e22;
        }
        
        .delete-btn {
            background-color: #ff6b6b;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .delete-btn:hover {
            background-color: #ee5253;
        }
        
        .summary {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
        }
        
        .summary h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .summary-value {
            font-weight: bold;
        }
        
        .positive {
            color: #27ae60;
        }
        
        .negative {
            color: #e74c3c;
        }
        
        footer {
            text-align: center;
            margin-top: 30px;
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }
        
        .status-待购 { background-color: #95a5a6; }
        .status-已比价 { background-color: #f39c12; }
        .status-已下单 { background-color: #3498db; }
        .status-已付款 { background-color: #9b59b6; }
        .status-已收货 { background-color: #2ecc71; }
        .status-已安装 { background-color: #27ae60; }
        
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            th, td {
                padding: 8px 10px;
            }
            
            button {
                padding: 8px 16px;
                font-size: 14px;
            }
            
            .actions {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <header>
                <h1>装修家电统计表格</h1>
                <p class="description">数据自动保存到本地</p>
            </header>
            
            <div class="actions">
                <button @click="addRow" class="btn-add">添加新行</button>
                <button @click="exportExcel" class="btn-export">导出Excel</button>
                <button @click="exportJson" class="btn-export">导出JSON</button>
                <button @click="clearAllData" class="btn-clear">清空数据</button>
                <input type="file" ref="fileInput" @change="importJson" accept=".json" style="display: none;">
                <button @click="$refs.fileInput.click()" class="btn-add">导入JSON</button>
            </div>
            
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>产品名称</th>
                            <th>品牌/型号</th>
                            <th>数量</th>
                            <th>预算价格(元)</th>
                            <th>实际价格(元)</th>
                            <th>购买途径</th>
                            <th>状态</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in appliances" :key="item.id">
                            <td>{{ index + 1 }}</td>
                            <td><input v-model="item.name" type="text" placeholder="例如: 冰箱" @input="saveData"></td>
                            <td><input v-model="item.brand" type="text" placeholder="例如: 海尔 BCD-575WDVP" @input="saveData"></td>
                            <td><input v-model.number="item.quantity" type="number" min="1" @input="saveData"></td>
                            <td><input v-model.number="item.budgetPrice" type="number" min="0" step="0.01" placeholder="0.00" @input="saveData"></td>
                            <td><input v-model.number="item.actualPrice" type="number" min="0" step="0.01" placeholder="0.00" @input="saveData"></td>
                            <td>
                                <select v-model="item.channel" @change="saveData">
                                    <option value="">--请选择--</option>
                                    <option>京东</option>
                                    <option>天猫</option>
                                    <option>淘宝</option>
                                    <option>苏宁易购</option>
                                    <option>国美</option>
                                    <option>品牌官网</option>
                                    <option>线下实体店</option>
                                    <option>其他</option>
                                </select>
                            </td>
                            <td>
                                <select v-model="item.status" @change="saveData">
                                    <option value="">--请选择--</option>
                                    <option>待购</option>
                                    <option>已比价</option>
                                    <option>已下单</option>
                                    <option>已付款</option>
                                    <option>已收货</option>
                                    <option>已安装</option>
                                </select>
                            </td>
                            <td><input v-model="item.note" type="text" placeholder="备注信息" @input="saveData"></td>
                            <td><button @click="deleteRow(index)" class="delete-btn">删除</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="summary">
                <h3>统计信息</h3>
                <div class="summary-item">
                    <span>总预算:</span>
                    <span class="summary-value">{{ totalBudget.toFixed(2) }} 元</span>
                </div>
                <div class="summary-item">
                    <span>总实际支出:</span>
                    <span class="summary-value">{{ totalActual.toFixed(2) }} 元</span>
                </div>
                <div class="summary-item">
                    <span>预算差额:</span>
                    <span class="summary-value" :class="balance >= 0 ? 'positive' : 'negative'">
                        {{ balance.toFixed(2) }} 元
                    </span>
                </div>
                <div class="summary-item">
                    <span>总商品数量:</span>
                    <span class="summary-value">{{ totalQuantity }} 件</span>
                </div>
                <div class="summary-item">
                    <span>已完成项目:</span>
                    <span class="summary-value">{{ completedItems }} / {{ appliances.length }}</span>
                </div>
            </div>
            
            <footer>
                <p>© 2024 装修家电统计表格 - Vue版本 | 数据自动保存到本地存储</p>
            </footer>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    appliances: [],
                    nextId: 1
                }
            },
            computed: {
                totalBudget() {
                    return this.appliances.reduce((sum, item) => {
                        return sum + (item.budgetPrice || 0) * (item.quantity || 1);
                    }, 0);
                },
                totalActual() {
                    return this.appliances.reduce((sum, item) => {
                        return sum + (item.actualPrice || 0) * (item.quantity || 1);
                    }, 0);
                },
                balance() {
                    return this.totalBudget - this.totalActual;
                },
                totalQuantity() {
                    return this.appliances.reduce((sum, item) => {
                        return sum + (item.quantity || 1);
                    }, 0);
                },
                completedItems() {
                    return this.appliances.filter(item => item.status === '已安装').length;
                }
            },
            methods: {
                addRow() {
                    const newItem = {
                        id: this.nextId++,
                        name: '',
                        brand: '',
                        quantity: 1,
                        budgetPrice: 0,
                        actualPrice: 0,
                        channel: '',
                        status: '',
                        note: ''
                    };
                    this.appliances.push(newItem);
                    this.saveData();
                },
                deleteRow(index) {
                    if (this.appliances.length > 0) {
                        this.appliances.splice(index, 1);
                        this.saveData();
                    }
                },
                saveData() {
                    const data = {
                        appliances: this.appliances,
                        nextId: this.nextId,
                        lastSaved: new Date().toISOString()
                    };
                    localStorage.setItem('applianceData', JSON.stringify(data));
                },
                loadData() {
                    const savedData = localStorage.getItem('applianceData');
                    if (savedData) {
                        try {
                            const data = JSON.parse(savedData);
                            this.appliances = data.appliances || [];
                            this.nextId = data.nextId || 1;
                        } catch (error) {
                            console.error('加载数据失败:', error);
                            this.initializeDefaultData();
                        }
                    } else {
                        this.initializeDefaultData();
                    }
                },
                initializeDefaultData() {
                    this.appliances = [{
                        id: 1,
                        name: '',
                        brand: '',
                        quantity: 1,
                        budgetPrice: 0,
                        actualPrice: 0,
                        channel: '',
                        status: '',
                        note: ''
                    }];
                    this.nextId = 2;
                    this.saveData();
                },
                clearAllData() {
                    if (confirm('确定要清空所有数据吗？此操作不可恢复！')) {
                        this.appliances = [];
                        this.nextId = 1;
                        localStorage.removeItem('applianceData');
                        this.initializeDefaultData();
                    }
                },
                exportExcel() {
                    // 准备数据
                    const data = [];
                    
                    // 添加标题行
                    data.push(['装修家电统计表']);
                    data.push(['导出时间：' + new Date().toLocaleString('zh-CN')]);
                    data.push([]);
                    
                    // 添加表头
                    const headers = ['序号', '产品名称', '品牌/型号', '数量', '预算价格(元)', '实际价格(元)', '购买途径', '状态', '备注'];
                    data.push(headers);
                    
                    // 添加数据行
                    this.appliances.forEach((item, index) => {
                        const rowData = [
                            index + 1,
                            item.name || '',
                            item.brand || '',
                            item.quantity || 1,
                            item.budgetPrice || 0,
                            item.actualPrice || 0,
                            item.channel || '',
                            item.status || '',
                            item.note || ''
                        ];
                        data.push(rowData);
                    });
                    
                    // 添加统计信息
                    data.push([]);
                    data.push(['统计信息', '', '', '', '', '', '', '', '']);
                    data.push(['总预算', this.totalBudget.toFixed(2) + ' 元', '', '', '', '', '', '', '']);
                    data.push(['总实际支出', this.totalActual.toFixed(2) + ' 元', '', '', '', '', '', '', '']);
                    data.push(['预算差额', this.balance.toFixed(2) + ' 元', '', '', '', '', '', '', '']);
                    data.push(['总商品数量', this.totalQuantity + ' 件', '', '', '', '', '', '', '']);
                    data.push(['已完成项目', this.completedItems + ' / ' + this.appliances.length, '', '', '', '', '', '', '']);
                    
                    // 创建工作表
                    const ws = XLSX.utils.aoa_to_sheet(data);
                    
                    // 设置列宽
                    const colWidths = [
                        { wch: 6 },   // 序号
                        { wch: 20 },  // 产品名称
                        { wch: 25 },  // 品牌/型号
                        { wch: 8 },   // 数量
                        { wch: 12 },  // 预算价格
                        { wch: 12 },  // 实际价格
                        { wch: 12 },  // 购买途径
                        { wch: 10 },  // 状态
                        { wch: 20 }   // 备注
                    ];
                    ws['!cols'] = colWidths;
                    
                    // 设置行高
                    ws['!rows'] = [];
                    for (let i = 0; i < data.length; i++) {
                        ws['!rows'][i] = { hpt: 20 };
                    }
                    
                    // 合并标题单元格
                    ws['!merges'] = [
                        { s: { r: 0, c: 0 }, e: { r: 0, c: 8 } }, // 标题行
                        { s: { r: 1, c: 0 }, e: { r: 1, c: 8 } }  // 时间行
                    ];
                    
                    // 设置单元格样式
                    const range = XLSX.utils.decode_range(ws['!ref']);
                    
                    for (let R = range.s.r; R <= range.e.r; ++R) {
                        for (let C = range.s.c; C <= range.e.c; ++C) {
                            const cell_address = { c: C, r: R };
                            const cell_ref = XLSX.utils.encode_cell(cell_address);
                            
                            if (!ws[cell_ref]) continue;
                            
                            // 设置字体和对齐
                            ws[cell_ref].s = {
                                font: { name: 'Arial', sz: 10 },
                                alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
                                border: {
                                    top: { style: 'thin', color: { rgb: '000000' } },
                                    bottom: { style: 'thin', color: { rgb: '000000' } },
                                    left: { style: 'thin', color: { rgb: '000000' } },
                                    right: { style: 'thin', color: { rgb: '000000' } }
                                }
                            };
                            
                            // 标题行样式
                            if (R === 0) {
                                ws[cell_ref].s.font = { name: 'Arial', sz: 18, bold: true, color: { rgb: 'FFFFFF' } };
                                ws[cell_ref].s.fill = { fgColor: { rgb: '4472C4' } };
                                ws[cell_ref].s.alignment = { horizontal: 'center', vertical: 'center' };
                            }
                            // 时间行样式
                            else if (R === 1) {
                                ws[cell_ref].s.font = { name: 'Arial', sz: 9, color: { rgb: '666666' } };
                                ws[cell_ref].s.fill = { fgColor: { rgb: 'F2F2F2' } };
                                ws[cell_ref].s.alignment = { horizontal: 'center', vertical: 'center' };
                            }
                            // 表头样式
                            else if (R === 3) {
                                ws[cell_ref].s.font = { name: 'Arial', sz: 11, bold: true, color: { rgb: 'FFFFFF' } };
                                ws[cell_ref].s.fill = { fgColor: { rgb: '70AD47' } };
                                ws[cell_ref].s.alignment = { horizontal: 'center', vertical: 'center' };
                            }
                            // 统计信息标题
                            else if (R > 3 + this.appliances.length && R <= 3 + this.appliances.length + 6) {
                                if (C === 0) {
                                    ws[cell_ref].s.font = { name: 'Arial', sz: 10, bold: true, color: { rgb: 'FFFFFF' } };
                                    ws[cell_ref].s.fill = { fgColor: { rgb: 'FFC000' } };
                                    ws[cell_ref].s.alignment = { horizontal: 'center', vertical: 'center' };
                                } else if (C === 1) {
                                    ws[cell_ref].s.font = { name: 'Arial', sz: 10, bold: true, color: { rgb: '000000' } };
                                    ws[cell_ref].s.fill = { fgColor: { rgb: 'FFFF99' } };
                                    ws[cell_ref].s.alignment = { horizontal: 'left', vertical: 'center' };
                                }
                            }
                            // 数据行样式
                            else if (R > 3 && R <= 3 + this.appliances.length) {
                                // 交替行颜色
                                const isEvenRow = (R - 4) % 2 === 0;
                                if (isEvenRow) {
                                    ws[cell_ref].s.fill = { fgColor: { rgb: 'F8F9FA' } };
                                } else {
                                    ws[cell_ref].s.fill = { fgColor: { rgb: 'FFFFFF' } };
                                }
                                
                                ws[cell_ref].s.font = { name: 'Arial', sz: 10, color: { rgb: '000000' } };
                                
                                // 状态列着色
                                if (C === 7) {
                                    const status = ws[cell_ref].v;
                                    if (status === '已安装') {
                                        ws[cell_ref].s.fill = { fgColor: { rgb: '92D050' } };
                                        ws[cell_ref].s.font = { name: 'Arial', sz: 10, bold: true, color: { rgb: 'FFFFFF' } };
                                    } else if (status === '已收货') {
                                        ws[cell_ref].s.fill = { fgColor: { rgb: '5B9BD5' } };
                                        ws[cell_ref].s.font = { name: 'Arial', sz: 10, bold: true, color: { rgb: 'FFFFFF' } };
                                    } else if (status === '已付款') {
                                        ws[cell_ref].s.fill = { fgColor: { rgb: 'A5A5A5' } };
                                        ws[cell_ref].s.font = { name: 'Arial', sz: 10, bold: true, color: { rgb: 'FFFFFF' } };
                                    } else if (status === '待购') {
                                        ws[cell_ref].s.fill = { fgColor: { rgb: 'FF6B6B' } };
                                        ws[cell_ref].s.font = { name: 'Arial', sz: 10, bold: true, color: { rgb: 'FFFFFF' } };
                                    }
                                }
                                // 价格列右对齐和格式化
                                if (C === 4 || C === 5) {
                                    ws[cell_ref].s.alignment = { horizontal: 'right', vertical: 'center' };
                                    ws[cell_ref].s.numFmt = '¥#,##0.00';
                                    ws[cell_ref].s.font = { name: 'Arial', sz: 10, bold: true, color: { rgb: '000000' } };
                                }
                                // 数量列居中
                                if (C === 3) {
                                    ws[cell_ref].s.alignment = { horizontal: 'center', vertical: 'center' };
                                    ws[cell_ref].s.font = { name: 'Arial', sz: 10, bold: true, color: { rgb: '000000' } };
                                }
                                // 序号列居中
                                if (C === 0) {
                                    ws[cell_ref].s.alignment = { horizontal: 'center', vertical: 'center' };
                                    ws[cell_ref].s.font = { name: 'Arial', sz: 10, bold: true, color: { rgb: '000000' } };
                                }
                                // 产品名称和品牌列左对齐
                                if (C === 1 || C === 2) {
                                    ws[cell_ref].s.alignment = { horizontal: 'left', vertical: 'center', wrapText: true };
                                }
                                // 购买途径和备注列左对齐
                                if (C === 6 || C === 8) {
                                    ws[cell_ref].s.alignment = { horizontal: 'left', vertical: 'center', wrapText: true };
                                }
                            }
                        }
                    }
                    
                    // 创建工作簿
                    const wb = XLSX.utils.book_new();
                    XLSX.utils.book_append_sheet(wb, ws, "装修家电统计");
                    
                    // 导出Excel文件
                    const fileName = `装修家电统计_${new Date().toISOString().split('T')[0]}.xlsx`;
                    XLSX.writeFile(wb, fileName);
                },
                exportJson() {
                    const data = {
                        appliances: this.appliances,
                        nextId: this.nextId,
                        exportTime: new Date().toISOString(),
                        summary: {
                            totalBudget: this.totalBudget,
                            totalActual: this.totalActual,
                            balance: this.balance,
                            totalQuantity: this.totalQuantity,
                            completedItems: this.completedItems
                        }
                    };
                    
                    const jsonStr = JSON.stringify(data, null, 2);
                    const blob = new Blob([jsonStr], { type: 'application/json' });
                    const url = URL.createObjectURL(blob);
                    
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `装修家电统计_${new Date().toISOString().split('T')[0]}.json`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                    
                    alert('JSON文件已导出到下载文件夹');
                },
                importJson(event) {
                    const file = event.target.files[0];
                    if (!file) return;
                    
                    if (file.type !== 'application/json' && !file.name.endsWith('.json')) {
                        alert('请选择JSON格式的文件');
                        return;
                    }
                    
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        try {
                            const data = JSON.parse(e.target.result);
                            
                            // 验证数据格式
                            if (data.appliances && Array.isArray(data.appliances)) {
                                if (confirm('导入数据将覆盖当前所有数据，确定要继续吗？')) {
                                    this.appliances = data.appliances;
                                    this.nextId = data.nextId || (Math.max(...data.appliances.map(item => item.id || 0)) + 1);
                                    this.saveData();
                                    alert('数据导入成功！');
                                }
                            } else {
                                alert('JSON文件格式不正确，请检查文件内容');
                            }
                        } catch (error) {
                            alert('JSON文件解析失败，请检查文件格式：' + error.message);
                        }
                    };
                    
                    reader.readAsText(file);
                    // 清空input值，允许重复选择同一文件
                    event.target.value = '';
                }
            },
            mounted() {
                this.loadData();
            }
        }).mount('#app');
    </script>
</body>
</html>